---
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { getSortedPosts } from "@utils/content-utils";
import { formatDateToYYYYMMDD } from "@utils/date-utils";
import { Icon } from "astro-icon/components";
import I18nKey from "../i18n/i18nKey";
import { i18n } from "../i18n/translation";

const posts = await getSortedPosts();
const recentPosts = posts.slice(0, 6);
---

<MainGridLayout title={i18n(I18nKey.rss)} description={i18n(I18nKey.rssDescription)}>
    <div class="onload-animation">
        <!-- RSS 标题和介绍 -->
        <div class="card-base rounded-[var(--radius-large)] p-8 mb-6">
            <div class="text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-[var(--primary)] rounded-2xl mb-4">
                    <Icon name="material-symbols:rss-feed" class="text-white text-3xl" />
                </div>
                <h1 class="text-3xl font-bold text-[var(--primary)] mb-3">{i18n(I18nKey.rss)}</h1>
                <p class="text-75 max-w-2xl mx-auto">
                    {i18n(I18nKey.rssSubtitle)}
                </p>
            </div>
        </div>

        <!-- RSS 链接复制区域 -->
        <div class="card-base rounded-[var(--radius-large)] p-6 mb-6">
            <div class="flex items-center justify-between flex-wrap gap-4">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-[var(--primary)] rounded-xl flex items-center justify-center mr-4">
                        <Icon name="material-symbols:link" class="text-white text-xl" />
                    </div>
                    <div>
                        <h3 class="font-semibold text-90 mb-1">{i18n(I18nKey.rssLink)}</h3>
                        <p class="text-sm text-75">{i18n(I18nKey.rssCopyToReader)}</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <code class="bg-[var(--card-bg)] px-3 py-2 rounded-lg text-sm font-mono text-75 border border-[var(--line-divider)]">
                        {Astro.site}rss.xml
                    </code>
                    <button 
                        id="copy-rss-btn"
                        class="px-4 py-2 bg-[var(--primary)] text-white rounded-lg hover:opacity-80 transition-all duration-200 font-medium text-sm"
                        data-url={`${Astro.site}rss.xml`}
                    >
                        {i18n(I18nKey.rssCopyLink)}
                    </button>
                </div>
            </div>
        </div>

        <!-- 最新文章预览 -->
        <div class="card-base rounded-[var(--radius-large)] p-6 mb-6">
            <h2 class="text-xl font-bold text-90 mb-4 flex items-center">
                <Icon name="material-symbols:article" class="mr-2 text-[var(--primary)]" />
                {i18n(I18nKey.rssLatestPosts)}
            </h2>
            <div class="space-y-4">
                {recentPosts.map((post) => (
                    <article class="bg-[var(--card-bg)] rounded-xl p-4 border border-[var(--line-divider)] hover:border-[var(--primary)] transition-all duration-300">
                        <h3 class="text-lg font-semibold text-90 mb-2 hover:text-[var(--primary)] transition-colors">
                            <a href={`/posts/${post.slug}/`} class="hover:underline">
                                {post.data.title}
                            </a>
                        </h3>
                        {post.data.description && (
                            <p class="text-75 mb-3 line-clamp-2">
                                {post.data.description}
                            </p>
                        )}
                        <div class="flex items-center gap-4 text-sm text-60">
                            <time datetime={post.data.published.toISOString()} class="text-75">
                                {formatDateToYYYYMMDD(post.data.published)}
                            </time>
                        </div>
                    </article>
                ))}
            </div>
        </div>

        <!-- RSS 说明 -->
        <div class="card-base rounded-[var(--radius-large)] p-6">
            <h2 class="text-xl font-bold text-90 mb-4 flex items-center">
                <Icon name="material-symbols:help-outline" class="mr-2 text-[var(--primary)]" />
                {i18n(I18nKey.rssWhatIsRSS)}
            </h2>
            <div class="text-75 space-y-3">
                <p>
                    {i18n(I18nKey.rssWhatIsRSSDescription)}
                </p>
                <ul class="list-disc list-inside space-y-1 ml-4">
                    <li>{i18n(I18nKey.rssBenefit1)}</li>
                    <li>{i18n(I18nKey.rssBenefit2)}</li>
                    <li>{i18n(I18nKey.rssBenefit3)}</li>
                    <li>{i18n(I18nKey.rssBenefit4)}</li>
                </ul>
                <p class="text-sm">
                    {i18n(I18nKey.rssHowToUse)}
                </p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const copyBtn = document.getElementById('copy-rss-btn');
            if (copyBtn) {
                copyBtn.addEventListener('click', async function() {
                    const url = this.getAttribute('data-url');
                    if (!url) return;
                    try {
                        await navigator.clipboard.writeText(url);
                        const originalText = this.textContent || i18n.RSS.copyLink;
                        this.textContent = i18n.RSS.copied;
                        this.style.backgroundColor = 'var(--success-color, #10b981)';
                        
                        setTimeout(() => {
                            this.textContent = originalText;
                            this.style.backgroundColor = '';
                        }, 2000);
                    } catch (err) {
                        console.error('复制失败:', err);
                        const originalText = this.textContent || i18n.RSS.copyLink;
                        this.textContent = i18n.RSS.copyFailed;
                        setTimeout(() => {
                            this.textContent = originalText;
                        }, 2000);
                    }
                });
            }
        });
    </script>
</MainGridLayout>